<template>
  <div class="lg:px-[4rem]" style="border-bottom: 1px solid #f0f0f0">
    <div
      class="max-w-[111.125rem] h-[var(--pc-second-nav-height)] mx-auto flex items-center justify-between"
    >
      <div class="flex text-base gap-[0.75rem] items-center">
        <h2 class="text-[#000000f2]">Reno14 Pro</h2>
        <i class="inline-block w-[1px] h-[1rem] bg-[#dcdcdc]"></i>
        <span class="text-[#0000004d]">Reno14</span>
      </div>

      <div class="flex text-sm items-center">
        <div
          class="flex text-[#000000f2] bg-[#f8f9fa] py-[0.375rem] px-[0.75rem] rounded-full mr-1 cursor-pointer"
        >
          <svg class="w-[1.125rem] aspect-square">
            <use href="#icon-overview" />
          </svg>
          <p>概览</p>
        </div>

        <div class="flex mr-[1.125rem] cursor-pointer">
          <svg class="w-[1.125rem] aspect-square">
            <use href="#icon-menu" />
          </svg>
          <p>参数</p>
        </div>

        <button
          class="text-xs py-[0.375rem] px-[1.125rem] cursor-pointer bg-[#2cff73] rounded-full leading-[1.67]"
        >
          立即购买
        </button>
      </div>
    </div>
  </div>
</template>
